<template>
    <div class="app-container" style="padding:20px">
        <el-card>
            <FormTopBar title="档案上传" :flowInsId="form.flowInsId" :taskId="taskId" :businessId="form.id" :billType="billType" @submitForm="submitForm"></FormTopBar>
        </el-card>

        <el-card class="top15">
            <div slot="header" class="clearfix">
                <span>基础信息</span>
                <span style="float: right" v-if="form.id!=undefined">档案编号：{{form.code}}</span>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="readonly">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="档案文件" prop="url">
                            <file-upload v-model="form.url" :disabled="readonly"></file-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="文件名称" prop="title">
                            <el-input v-model="form.title" placeholder="请输入上传档案文件" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="16" :lg="16">
                        <el-form-item label="档案副标题" prop="subTitle">
                            <el-input v-model="form.subTitle" placeholder="请输入档案副标题"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="文件夹" prop="folderId">
                            <treeselect v-model="form.folderId" :options="folderTree" :show-count="true" placeholder="请选择文件夹"  :disabled="readonly"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8" :lg="8">
                        <el-form-item label="存放位置" prop="cabinetId">
                            <treeselect v-model="form.cabinetId" :options="cabinetTree" :show-count="true" placeholder="请选择存放位置"  :disabled="readonly"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="档案分类" prop="groupIdList">
                    <el-select v-model="groupIdList" multiple placeholder="请输入档案分类">
                        <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入内容"/>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
//import FlowInfo from "@/views/oa/flow/flowInfo";
import {addAmArchive, getAmArchive, updateAmArchive} from "@/api/am/amArchive";
import {listAllAmGroup} from "@/api/am/amGroup";
import Treeselect from "@riophae/vue-treeselect";
import {treeselectCabinet} from "@/api/am/amCabinet"
import {treeselectFolder} from "@/api/am/amFolder"
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import FormTopBar from "@/views/common/formTopBar"

export default {
    name: "ArchiveForm",
    //components:{FlowInfo,Treeselect,FormTopBar},
    components:{Treeselect,FormTopBar},
    dicts: ['archive_borrow_status', 'oa_flow_billstatus', 'sys_normal_disable'],
    data() {
        return {
            groupList:[],
            groupIdList:[],
            folderTree:[],
            cabinetTree:[],
            billType:this.BillType.billType.ARCHIVE_UPLOAD,
            // 表单参数
            form: {
            },
            showFlowInfo:false,
            taskId:'',
            readonly:false,
            // 表单校验
            rules: {
                title: [
                    {required: true, message: "档案标题不能为空", trigger: "blur"}
                ],
                folderId: [
                    {required: true, message: "文件夹不能为空", trigger: "blur"}
                ],
                cabinetId: [
                    {required: true, message: "存放位置不能为空", trigger: "blur"}
                ],
            },
            showCommitDialog:false,
            commitType:""
        };
    },
    created() {
        // 获取分组集合
        this.getGroupList();
        //获取文件夹，和档案柜，下拉数据集
        this.getTreeselect();
        //单据的id主键
        const formId = this.$route.params && this.$route.params.formId;
        //单据的类型
        //单据的类型
        const taskId = this.$route.query && this.$route.query.taskId;
        const readonly = this.$route.query && this.$route.query.readonly;
        const folderId = this.$route.query && this.$route.query.folderId;
        if(taskId){
            this.taskId = taskId;
        }
        if("1"==readonly){
            this.readonly = true;
        }
        if(formId){
            this.form.id = formId;
            this.getDetailData(formId);
        }
        if(folderId){
            this.form.folderId = folderId;
        }
    },
    mounted() {

    },
    methods: {
        // 获取分组集合
        getGroupList(){
            listAllAmGroup().then(res=>{
                this.groupList = res.data;
            })
        },
        getTreeselect() {
            treeselectCabinet().then(response => {
                this.cabinetTree = response.data;
            });
            treeselectFolder().then(res=>{
                this.folderTree = res.data;
            })
        },
        //  获取单据信息
        getDetailData(id) {
            getAmArchive(id).then(response => {
                this.form = response.data;
                if(response.data.groupId && response.data.groupId.length>0){
                    let arr = response.data.groupId.split(",");
                    let newArr = [];
                    arr.forEach((item,index)=>{
                        newArr.push(parseInt(item));
                    })
                    this.groupIdList = newArr;
                }
                // this.selectCar(response.data.carId);
            });
        },
        /** 提交按钮 */
        submitForm() {
            if(this.groupIdList&&this.groupIdList.length>0){
                this.form.groupId = this.groupIdList.join(",");
            }
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateAmArchive(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.closeThisPage();
                        });
                    } else {
                        addAmArchive(this.form).then(response => {
                            this.$modal.msgSuccess("保存成功");
                            this.closeThisPage();
                        });
                    }
                }
            });
        },
        closeThisPage(){
            this.$tab.closeOpenPage({ path: "/am/amArchive"});
        },
    }
};
</script>
<style lang="scss" scoped>


</style>
